<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-card shadow="hover">
          <i class="el-icon-tickets"></i>
          今日订单总数<br />
          <p class="p1">{{ todayOrder }}</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <i class="el-icon-more-outline"></i>
          今日销售总额<br />
          <p class="p1">{{ todayMoney }}</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <i class="el-icon-coin"></i>
          昨日销售总额<br />
          <p class="p1">{{ yesterdayMoney }}</p></el-card
        >
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <i class="el-icon-s-marketing"></i>
          近七天销售总额<br />
          <p class="p1">{{ sevendaysMoney }}</p></el-card
        >
      </el-col>
    </el-row>

    <!-- 待处理事务 -->
    <el-container>
      <el-header>待处理事务</el-header>
      <el-main>
        <div style="text-align:center">
          <div class="a1">
            <el-link @click="aa(2)" target="_blank"
              ><span>
                待付款订单
              </span>
              <span class="span1">({{ orderstatus }})</span></el-link
            >
            <el-divider></el-divider>
            <el-link href="" target="_blank"
              ><span>
                待发货订单
              </span>
              <span class="span1">({{ consignment }})</span></el-link
            >
            <el-divider></el-divider>
            <el-link href="" target="_blank">
              <span>
                已发货订单
              </span>
              <span class="span1">({{ delivered }})</span></el-link
            >
            <el-divider></el-divider>
          </div>

          <div class="a1">
            <el-link href="" target="_blank"
              ><span>已完成订单 </span>
              <span class="span1">({{ completed }})</span></el-link
            >
            <el-divider></el-divider>
            <el-link href="" target="_blank"
              ><span>
                新缺货登记
                <span class="span1">()</span>
              </span></el-link
            >
            <el-divider></el-divider>
            <el-link href="" target="_blank"
              ><span>
                待处理退货订单
              </span>
              <span class="span2">({{ returnOrder }})</span></el-link
            >
            <el-divider></el-divider>
          </div>

          <div class="a1">
            <el-link href="" target="_blank"
              ><span> 待确认退货订单 </span>
              <span class="span3">({{ returnOrder }})</span></el-link
            >
            <el-divider></el-divider>
            <el-link href="" target="_blank"
              ><span>
                待处理退货申请
              </span>
              <span class="span3">({{ returnapply }})</span></el-link
            >
            <el-divider></el-divider>
            <el-link href="" target="_blank">
              <span>
                广告位即将到期
              </span>
              <span class="span3">()</span></el-link
            >
            <el-divider></el-divider>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 待处理事务 -->
    <el-container>
      <el-header>运营快捷入口</el-header>
      <el-main>
        <div style="text-align:center">
          <el-button
            class="btnMenu"
            @click="$router.push({ path: '/home/orders' })"
            ><i class="el-icon-plus"></i> <br /><span class="btn1"
              >添加商品</span
            ></el-button
          >
          <el-button
            class="btnMenu"
            @click="$router.push({ path: '/home/orders' })"
            ><i class="el-icon-tickets"></i> <br /><span class="btn1"
              >订单列表</span
            ></el-button
          >
          <el-button
            class="btnMenu"
            @click="$router.push({ path: '/home/orders' })"
            ><i class="el-icon-user"></i> <br /><span class="btn1"
              >用户管理</span
            ></el-button
          >
          <el-button
            class="btnMenu"
            @click="$router.push({ path: '/home/orders' })"
            ><i class="el-icon-s-marketing"></i> <br /><span class="btn1"
              >交易统计</span
            ></el-button
          >
          <el-button
            class="btnMenu"
            @click="$router.push({ path: '/home/orders' })"
            ><i class="el-icon-mobile-phone"></i> <br /><span class="btn1"
              >短信营销</span
            ></el-button
          ><el-button
            class="btnMenu"
            @click="$router.push({ path: '/home/orders' })"
            ><i class="el-icon-monitor"></i> <br /><span class="btn1"
              >广告管理</span
            ></el-button
          ><el-button
            class="btnMenu"
            @click="$router.push({ path: '/home/orders' })"
            ><i class="el-icon-star-off"></i> <br /><span class="btn1"
              >专题管理</span
            ></el-button
          ><el-button
            class="btnMenu"
            @click="$router.push({ path: '/home/orders' })"
            ><i class="el-icon-alarm-clock"></i> <br /><span class="btn1"
              >秒杀管理</span
            ></el-button
          ><el-button
            class="btnMenu"
            @click="$router.push({ path: '/home/orders' })"
            ><i class="el-icon-chat-line-round"></i> <br /><span class="btn1"
              >新品推荐</span
            ></el-button
          >
        </div></el-main
      >
    </el-container>
    <div>
      <div class="c1">
        <el-container>
          <el-header>商品总览</el-header>
          <el-main>
            <el-row :gutter="12">
              <el-col :span="6">
                <el-card shadow="hover"
                  ><p class="p1">{{ sumsku2 }}</p>
                  <br />已下架</el-card
                >
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover">
                  <p class="p1">{{ sumsku3 }}</p>
                  <br />已上架
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover"
                  ><p class="p1">{{ yesterdayMoney }}</p>
                  <p />
                  <br />库存紧张
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover"
                  ><p class="p1">{{ sumsku }}</p>
                  <p />
                  <br />全部商品
                </el-card>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </div>
      <div class="c2">
        <el-container>
          <el-header>用户总览</el-header>
          <el-main>
            <el-row :gutter="12">
              <el-col :span="6">
                <el-card shadow="hover"
                  ><p class="p1">{{ usertoday }}</p>
                  <p />
                  <br />今日新增
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover"
                  ><p class="p1">{{ useryesterday }}</p>
                  <p />
                  <br />昨日新增
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover"
                  ><p class="p1">{{ useronmonth }}</p>
                  <br />本月新增</el-card
                >
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover"
                  ><p class="p1">{{ userLevel }}</p>
                  <p />
                  <br />会员总数
                </el-card>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </div>
    </div>
    <el-container style="clear:both">
      <el-header>订单统计</el-header>
      <el-main>
        <div>
          <div class="orders2">
            本月订单总数<br />
            <p class="p1">{{ dingdanmonth }}</p>
            <br />本周订单总数<br />
            <p class="p1">{{ dingdanonweek }}</p>
          </div>
          <div class="orders1">
            <div style="float:right;">
              <el-button type="text" @click="fetchData((val = 0))"
                >今日</el-button
              >
              <el-button type="text" @click="fetchData((val = 7))"
                >本周</el-button
              >
              <el-button type="text" @click="fetchData((val = 30))"
                >本月</el-button
              >
              <!-- 日期选择器 -->
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="fetchData()"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
            <div id="orders" style="width: 900px;height: 300px;"></div>
          </div>
        </div>
      </el-main>
    </el-container>

    <el-container>
      <el-header>销售统计</el-header>
      <el-main>
        <div>
          <div class="orders2">
            本月销售总额<br />
            <p class="p1">{{ monthMoney }}</p>
            <br />本周销售总额<br />
            <p class="p1">{{ sevendaysMoney }}</p>
          </div>
          <div class="orders1">
            <div style="float:right;">
              <el-button type="text" @click="fetchData((val = 0))"
                >今日</el-button
              >
              <el-button type="text" @click="fetchData((val = 7))"
                >本周</el-button
              >
              <el-button type="text" @click="fetchData((val = 30))"
                >本月</el-button
              >
              <!-- 日期选择器 -->
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="fetchData()"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
            <div id="orders2" style="width: 900px;height: 300px;"></div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      date: "", //时间
      tbOrderItem: "",
      consignment: "",
      delivered: "", //查询已发货订单
      orderstatus: "", //查询待付款的订单
      todayOrder: "", //查询今日订单总数
      completed: "", //查询已完成订单
      todayMoney: "", //查询今日销售总额
      yesterdayMoney: "", //查询昨日销售总额
      sevendaysMoney: "", //查询近七天销售总额
      tableData: [],
      dateRange: [], // 日期选择器绑定的变量
      userLevel: "", //查询所有会员
      sumsku: "", //所有商品
      sumsku3: "", //未下架
      sumsku2: "", //已下架
      dingdanonweek: "", //本周订单总数
      dingdanmonth: "", //本月订单总数
      monthMoney: "", //本月销售总额
      bb: 0, //订单总数默认为0
      usertoday: "", //查询今日新增用户
      useryesterday: "", //查询昨日新增用户
      useronmonth: "", //查询本月新增用户
      returnOrder: "", //待处理退货订单
      returnapply: "" //待处理退货申请
    };
  },
  created() {
    this.findStatistics();
    this.onweek();
    this.onmonth();
    this.findsevendaysMoney();
    this.findmonthMoney();
    this.Newtoday();
    this.Newyesterday();
    this.Newmonth();
  },
  mounted() {
    this.Orderstatistics();
    this.Salesstatistics();
  },
  methods: {
    as() {
      console.log(12121);
    },
    //订单统计
    async fetchData(val) {
      const time = new Date(Date.now() - 24 * val * 60 * 60 * 1000);
      this.dateRange = [];
      this.dateRange.push(time);
      this.dateRange.push(new Date(Date.now()));

      const date1 = this.dateRange[0];
      const date2 = this.dateRange[1];
      const categoryReportVo = {
        date1: date1,
        date2: date2
      };
      const { data: res } = await this.$http.post(
        `vi/order/order/orders`,
        categoryReportVo
      );
      this.dingdandate = res.data.maps.end_time;
      for (let i = 0; i < res.data.maps.length; i++) {
        const val = res.data.maps[i].end_time;
        this.formData.push([val, res.data.maps[i].orders]);
        this.bb = res.data.maps[i].orders + this.bb;
      }
      this.aaa();
      this.dingdan = this.bb;
      this.bb = 0;
    },
    //渲染订单统计
    Salesstatistics() {
      // 初始化echarts容器（销售统计）
      var myChart2 = echarts.init(document.getElementById("orders2"));

      let option2 = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          splitLine: {
            //去除网格线
            show: false
          }
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "30%"],
          splitLine: {
            //去除网格线
            show: false
          }
        },
        visualMap: {
          type: "piecewise",
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 0,
              lt: 8,
              color: "#8dcce6"
            }
          ]
        },
        series: [
          {
            type: "line",
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "#398dee",
              width: 5
            },
            markLine: {
              symbol: ["none", "none"],
              label: { show: false }
            },
            areaStyle: {},
            data: [
              ["2019-10-10", 100],
              ["2019-10-11", 75],
              ["2019-10-12", 130],
              ["2019-10-13", 120],
              ["2019-10-14", 200],
              ["2019-10-15", 90],
              ["2019-10-16", 50],
              ["2019-10-17", 80],
              ["2019-10-18", 100]
            ]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option2);
    },
    //渲染销售总额统计
    Orderstatistics() {
      // 初始化echarts容器（）
      var myChart = echarts.init(document.getElementById("orders"));

      let option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          splitLine: {
            //去除网格线
            show: false
          }
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "30%"],
          splitLine: {
            //去除网格线
            show: false
          }
        },
        visualMap: {
          type: "piecewise",
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 0,
              lt: 8,
              color: "#8dcce6"
            }
          ]
        },
        series: [
          {
            type: "line",
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "#398dee",
              width: 5
            },
            markLine: {
              symbol: ["none", "none"],
              label: { show: false }
            },
            areaStyle: {},
            data: [
              ["2019-10-10", 100],
              ["2019-10-11", 75],
              ["2019-10-12", 130],
              ["2019-10-13", 120],
              ["2019-10-14", 200],
              ["2019-10-15", 90],
              ["2019-10-16", 50],
              ["2019-10-17", 80],
              ["2019-10-18", 100]
            ]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    //获取今日新增
    async Newtoday() {
      const time = new Date(Date.now() - 24 * 0 * 60 * 60 * 1000);
      this.dateRange = [];
      this.dateRange.push(time);
      this.dateRange.push(new Date(Date.now()));
      const date1 = this.dateRange[0];
      const date2 = this.dateRange[1];
      const newuserVo = {
        date1: date1,
        date2: date2
      };
      const { data: res } = await this.$http.post(
        `vi/user/user/findnewuser`,
        newuserVo
      );
      this.usertoday = res.data.newuser;
    },
    //获取昨天新增
    async Newyesterday() {
      const time = new Date(Date.now() - 24 * 1 * 60 * 60 * 1000);
      this.dateRange = [];
      this.dateRange.push(time);
      this.dateRange.push(new Date(Date.now()));
      const date1 = this.dateRange[0];
      const date2 = this.dateRange[1];
      const newuserVo = {
        date1: date1,
        date2: date2
      };
      const { data: res } = await this.$http.post(
        `vi/user/user/findnewuser`,
        newuserVo
      );
      this.useryesterday = res.data.newuser;
    },
    //获取本月新增用户
    async Newmonth() {
      const time = new Date(Date.now() - 24 * 30 * 60 * 60 * 1000);
      this.dateRange = [];
      this.dateRange.push(time);
      this.dateRange.push(new Date(Date.now()));
      const date1 = this.dateRange[0];
      const date2 = this.dateRange[1];
      const newuserVo = {
        date1: date1,
        date2: date2
      };
      const { data: res } = await this.$http.post(
        `vi/user/user/findnewuser`,
        newuserVo
      );
      this.useronmonth = res.data.newuser;
    },
    //获取本月的销售总额
    async findmonthMoney() {
      const time = new Date(Date.now() - 24 * 30 * 60 * 60 * 1000);
      this.dateRange = [];
      this.dateRange.push(time);
      this.dateRange.push(new Date(Date.now()));
      const date1 = this.dateRange[0];
      const date2 = this.dateRange[1];

      const categoryReportVo = {
        date1: date1,
        date2: date2
      };
      const { data: res } = await this.$http.post(
        `vi/order/order/item/sevendays`,
        categoryReportVo
      );
      this.monthMoney = res.data.sevendaysMoney;
    },
    //获取七天的销售总额
    async findsevendaysMoney() {
      const time = new Date(Date.now() - 24 * 7 * 60 * 60 * 1000);
      this.dateRange = [];
      this.dateRange.push(time);
      this.dateRange.push(new Date(Date.now()));
      const date1 = this.dateRange[0];
      const date2 = this.dateRange[1];

      const categoryReportVo = {
        date1: date1,
        date2: date2
      };
      const { data: res } = await this.$http.post(
        `vi/order/order/item/sevendays`,
        categoryReportVo
      );
      this.sevendaysMoney = res.data.sevendaysMoney;
    },
    //获取近七天时间订单总数
    async onweek() {
      const time = new Date(Date.now() - 24 * 7 * 60 * 60 * 1000);
      this.dateRange = [];
      this.dateRange.push(time);
      this.dateRange.push(new Date(Date.now()));
      const date1 = this.dateRange[0];
      const date2 = this.dateRange[1];
      const categoryReportVo = {
        date1: date1,
        date2: date2
      };
      const { data: res } = await this.$http.post(
        `vi/order/order/orders`,
        categoryReportVo
      );
      for (let i = 0; i < res.data.maps.length; i++) {
        this.dingdan = res.data.maps[i].orders;
        this.bb = res.data.maps[i].orders + this.bb;
      }
      this.dingdanonweek = this.bb;
      this.bb = 0;
    },
    //获取本月时间订单总数
    async onmonth() {
      const time = new Date(Date.now() - 24 * 30 * 60 * 60 * 1000);
      this.dateRange = [];
      this.dateRange.push(time);
      this.dateRange.push(new Date(Date.now()));

      const date1 = this.dateRange[0];
      const date2 = this.dateRange[1];

      const categoryReportVo = {
        date1: date1,
        date2: date2
      };
      const { data: res } = await this.$http.post(
        `vi/order/order/orders`,
        categoryReportVo
      );
      for (let i = 0; i < res.data.maps.length; i++) {
        this.dingdanmo = res.data.maps[i].orders;
        this.bb = res.data.maps[i].orders + this.bb;
      }
      this.dingdanmonth = this.bb;
      this.bb = 0;
    },
    //跳转订单（待付款）
    aa(orderstatus) {
      this.orderstatus = 2;
      console.log(orderstatus);
      this.$router.push({
        //核心语句
        path: "/home/orders", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          transactionId: orderstatus
        }
      });
    },
    //初始化数据
    async findStatistics() {
      //待处理退货申请
      const { data: pending } = await this.$http.get(
        `vi/order/return/order/returnorder/0`
      );
      this.returnapply = pending.data.returnOrder;
      //待处理退货订单
      const { data: pending2 } = await this.$http.get(
        `vi/order/return/order/returnorder/1`
      );
      this.returnOrder = pending2.data.returnOrder;
      //查询今日订单总数
      const { data: res } = await this.$http.get(`vi/order/order/todayOrder`);
      this.todayOrder = res.data.todayOrder;
      //查询待付款的订单
      const { data: res1 } = await this.$http.get(
        `vi/order/order/Queryorderstatus/0`
      );
      this.orderstatus = res1.data.orderstatus;

      //查询已发货的订单
      const { data: res2 } = await this.$http.get(
        `vi/order/order/Queryorderstatus/1`
      );
      this.delivered = res2.data.orderstatus;

      //查询待发货订单
      const { data: res3 } = await this.$http.get(
        `vi/order/order/Queryorderstatus/2`
      );
      this.consignment = res3.data.orderstatus;

      //查询已完成订单
      const { data: res4 } = await this.$http.get(
        `vi/order/order/Queryorderstatus/3`
      );
      this.completed = res4.data.orderstatus;

      //查询今日销售总额
      const { data: res5 } = await this.$http.get(`vi/order/order/item/today`);
      this.todayMoney = res5.data.todayMoney;
      //查询昨日销售总额
      const { data: res6 } = await this.$http.get(
        `vi/order/order/item/yesterday`
      );
      this.yesterdayMoney = res6.data.yesterdayMoney;

      //查询所有会员
      const { data: res8 } = await this.$http.get(`vi/user/user/finduser`);
      this.userLevel = res8.data.userLevel;
      //查询所有商品
      const { data: res9 } = await this.$http.get(`vi/goods/sku/findsku`);
      this.sumsku = res9.data.sumsku;
      //查询已下架商品
      const { data: res10 } = await this.$http.get(`vi/goods/sku/findsku2`);
      this.sumsku2 = res10.data.sumsku2;
      //查询未下架商品
      const { data: res11 } = await this.$http.get(`vi/goods/sku/findsku3`);
      this.sumsku3 = res11.data.sumsku3;
    }
  }
};
</script>

<style scoped>
.btn1 {
  font-size: 16px;
}
.p1 {
  font-size: 30px;
}
.orders2 {
  float: left;
  width: 200px;
  height: 300px;
  text-align: center;
}
.orders1 {
  float: left;
  width: 900px;
  height: 300px;
}
.c1 {
  float: left;
  width: 620px;
  text-align: left;
}
.c2 {
  float: right;
  width: 620px;
  text-align: left;
}
.btnMenu {
  height: 150px;
  width: 100px;
}
.span1 {
  padding-left: 255px;
}
.span2 {
  padding-left: 228px;
}
.span3 {
  padding-left: 228px;
}
.el-divider {
  width: 350px;
}
.a1 {
  width: 415px;
  text-align: left;
  float: left;
}
.el-header,
.el-footer {
  background-color: #e9e2e2;
  color: #333;
  text-align: left;
  line-height: 60px;
}
.el-main {
  background-color: #fdfdfd;
}
</style>
